<template>
	<view class="news-detail-container">
		<!-- 封面图片 -->
		<view class="news-cover">
			<!-- <I-Images
        :src="detail.cover_show"
        height="300rpx"
        mode="widthFix"
        errorText="图片加载失败，请重试"
      /> -->
 
		</view>

		<!-- 新闻内容区域 -->
		<view class="news-content">
			<!-- 标题 -->
			<view class="news-title">{{ detail.title }}</view>
			
			<view style="display: flex; justify-content: center;">
			  <I-Images 
			    :src="detail.cover_show" 
			    height="auto" 
			    lazyLoad 
			    showLoading 
			    showError 
			    fade 
			    duration="800"  
			    width="90vw" 
			    bgColor="#fff">
			  </I-Images>
			</view>

			<!-- 作者和发布时间 -->
			<view class="news-meta">
				<view class="meta-item">
					<u-icon name="account" size="14" color="#666"></u-icon>
					<text class="meta-text">{{ detail.fa_name }}</text>
				</view>
				<view class="meta-item">
					<u-icon name="clock" size="14" color="#666"></u-icon>
					<text class="meta-text">{{ detail.created_at_show }}</text>
				</view>
				<view class="meta-item">
					<u-icon name="eye" size="14" color="#666"></u-icon>
					<text class="meta-text">{{ detail.view_count }}人看过</text>
				</view>
			</view>

			<!-- 正文内容 -->
			<view class="news-body">
				<u-parse :content="detail.content"></u-parse>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<!--    <view class="news-footer">
      <view class="footer-item" @click="handleLike">
        <u-icon :name="isLiked ? 'heart-fill' : 'heart'" :color="isLiked ? '#f56c6c' : '#666'"></u-icon>
        <text>点赞</text>
      </view>
      <view class="footer-item" @click="handleCollect">
        <u-icon :name="isCollected ? 'star-fill' : 'star'" :color="isCollected ? '#ffba00' : '#666'"></u-icon>
        <text>收藏</text>
      </view>
      <view class="footer-item" @click="handleComment">
        <u-icon name="chat" color="#666"></u-icon>
        <text>评论</text>
      </view>
      <view class="footer-item" @click="handleShare">
        <u-icon name="share" color="#666"></u-icon>
        <text>分享</text>
      </view>
    </view> -->
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		getNewsListId
	} from "@/api/news.js";
	import {
		onShow
	} from "@dcloudio/uni-app";

	const props = defineProps({
		id: {
			type: String,
			default: "",
		},
	});

	const detail = ref({});
	const isLiked = ref(false);
	const isCollected = ref(false);
	const imageErr = () => {};
	// 获取新闻详情
	onShow(async () => {
		try {
			const res = await getNewsListId({
				id: props.id
			});
			detail.value = res.data;
			uni.setNavigationBarTitle({
				title: res.data.title
			});
		} catch (error) {
			console.error("获取新闻详情失败:", error);
		}
	});

	// 图片预览
	const previewImage = () => {
		if (!detail.value.cover) return;
		uni.previewImage({
			urls: [detail.value.cover],
		});
	};

	// 点赞处理
	const handleLike = () => {
		isLiked.value = !isLiked.value;
	};

	// 收藏处理
	const handleCollect = () => {
		isCollected.value = !isCollected.value;
	};

	// 评论处理
	const handleComment = () => {
		uni.navigateTo({
			url: `/pages/news/comment?id=${props.id}`,
		});
	};

	// 分享处理
	const handleShare = () => {
		uni.share({
			title: detail.value.title,
			path: `/pages/news/detail?id=${props.id}`,
			success: () => {
				uni.showToast({
					title: "分享成功",
					icon: "success"
				});
			},
		});
	};
</script>

<style lang="scss" scoped>
	.news-detail-container {
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: 60px;
	}

	.news-cover {
		width: 100%;
		// height: 200px;
		position: relative;

		.cover-error {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #f5f5f5;

			.error-text {
				margin-top: 8px;
				font-size: 14px;
				color: #999;
			}
		}
	}

	.news-content {
		padding: 16px;
	}

	.news-title {
		font-size: 20px;
		font-weight: bold;
		line-height: 1.4;
		color: #333;
		margin-bottom: 12px;
	}

	.news-meta {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
		padding-bottom: 12px;
		border-bottom: 1px solid #f0f0f0;

		.meta-item {
			display: flex;
			align-items: center;
			margin-right: 16px;

			.meta-text {
				margin-left: 4px;
				font-size: 12px;
				color: #666;
			}
		}
	}

	.news-body {
		line-height: 1.8;
		font-size: 16px;
		color: #333;

		::v-deep img {
			max-width: 100%;
			border-radius: 4px;
			margin: 10px 0;
		}
	}

	.news-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 50px;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 100;

		.footer-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: #666;

			text {
				margin-top: 4px;
			}
		}
	}
</style>